<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
</head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="../css/student.css">
<link rel="stylesheet" href="../css/header.css">

<body style="background: url('../img/bg-min.jpg');background-size: cover;">
    <div id="app5">
        <div class="header">
            <div class="logo">
                <h1>学生课程管理系统</h1>
            </div>
            <el-menu class="el-menu-nav" mode="horizontal" background-color="#545c64" text-color="#fff"
                active-text-color="#ffd04b" router>
                <el-submenu index="1">
                    <template slot="title">个人信息</template>
                    <el-menu-item @click="toMember">{{userName}}</el-menu-item>
                </el-submenu>
            </el-menu>
            <div class="line"></div>
        </div>
        <div class="main">
            <div class="leftMenu" style="width: 145px;">
                <el-row class="tac" style="width: 145px;">
                    <el-menu default-active="4" class="el-menu-vertical-demo" background-color="#545c64"
                        text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="1" @click="selectCurseList">
                            <span slot="title">选课列表</span>
                        </el-menu-item>
                        <el-menu-item index="2" @click="tostudentSelectedSubject">
                            <span slot="title">已选列表</span>
                        </el-menu-item>
                        <el-menu-item index="3" @click="toMySubject">
                            <span slot="title">课程表</span>
                        </el-menu-item>
                        <el-menu-item index="4" @click="toStudentInfo">
                            <span slot="title">个人信息</span>
                        </el-menu-item>
                    </el-menu>
                </el-row>
            </div>
            <div class="rigntMenu info-state">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <h4>个人信息</h4>
                    </div>
                    <el-form label-width="80px" class="studentForm">
                        <el-form-item label="姓名" prop="name">
                            {{ruleForm.name}}
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            {{ruleForm.sex}}
                        </el-form-item>
                        <el-form-item label="电话" prop="mobbile">
                            {{ruleForm.mobile}}
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="logout">退出登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </div>

    </div>

</body>
<script>
    var app5 = new Vue({
        el: '#app5',
        data: {
            userName: "",
            ruleForm: {
                name: "",
                sex: "",
                mobile: "",
            },
        },
        created: function () {

        },
        mounted: function () {
            this.userName = window.localStorage.getItem("userName");
            this.ruleForm.name = window.localStorage.getItem("name");
            this.ruleForm.mobile = window.localStorage.getItem("mobile");
            this.ruleForm.sex = window.localStorage.getItem("sex") == 0 ? '男' : '女';
        },
        methods: {
            selectCurseList: function () {
                window.location.href = "selectCurseList.html"
            },
            toMySubject: function () {
                window.location.href = "mySubject.html"
            },
            tostudentSelectedSubject: function () {
                window.location.href = "studentSelectedSubject.html"
            },
            toStudentInfo: function () {
                window.location.href = "studentInfo.html"
            },
            logout: function () {
                window.localStorage.removeItem("type")
                window.localStorage.removeItem("creator")
                window.localStorage.removeItem("info")
                window.localStorage.removeItem("userName")
                window.localStorage.removeItem("sex")
                window.localStorage.removeItem("mobile")
                window.localStorage.removeItem("name")
                window.location.href = "login.html"
            },
            toMember: function () {
                window.location.href = "studentInfo.html"
            }

        }
    });
</script>

</html>
